import { PureComponent } from 'react'
import { Input, Select, Button } from 'antd'
import SingleTable from 'components/table/index'
import styles from './onHoldIn.less'
const { Option } = Select
export default class OnHoldIn extends PureComponent {
    render(){
        const dataList = []
        const columns = [
        {
            key: 'gmtCreate',
            title: '特殊运单号：',
            dataIndex: 'gmtCreate',
            align: 'center',
        },
        {
            key: 'operationTypeName',
            title: '国内运单号',
            dataIndex: 'operationTypeName',
            align: 'center',
        },
        {
            key: 'creatorName',
            title: '订单状态',
            dataIndex: 'creatorName',
            align: 'center',
        },
        {
            key: '1',
            title: '物流状态',
            dataIndex: 'gmtCreate',
            align: 'center',
        },
        {
            key: '2',
            title: '始发港',
            dataIndex: 'operationTypeName',
            align: 'center',
        },
        {
            key: '3',
            title: '目的港',
            dataIndex: 'creatorName',
            align: 'center',
        },
        {
            key: '4',
            title: '货币单位',
            dataIndex: 'creatorName',
            align: 'center',
        },
        {
            key: '5',
            title: '总运费',
            dataIndex: 'creatorName',
            align: 'center',
        },
        {
            key: '6',
            title: '支付方式',
            dataIndex: 'creatorName',
            align: 'center',
        },
        {
            key: '7',
            title: '支付状态',
            dataIndex: 'creatorName',
            align: 'center',
        },
        {
            key: '8',
            title: '异常类型',
            dataIndex: 'creatorName',
            align: 'center',
        },
        {
            key: '9',
            title: '异常原因',
            dataIndex: 'creatorName',
            align: 'center',
        },
        {
            key: '10',
            title: 'onhold状态',
            dataIndex: 'creatorName',
            align: 'center',
        },
        {
            key: '11',
            title: '操作人',
            dataIndex: 'creatorName',
            align: 'center',
        },
        {
            key: '12',
            title: '解除异常',
            dataIndex: 'creatorName',
            align: 'center',
        },
        ]
        return(
            <div className={styles.onHoldIn}>
                <div className={styles.onHoldInBox}>
                    <h2>ONHOLD 跟进</h2>
                </div>
                <div className={styles.onHoldInSearch}>
                    <div className={styles.onHoldInSin}>
                        <span className={styles.onHoldInSpan}>异常类型：</span>
                        <Input className={styles.onHoldInInput}/>
                    </div>
                    <div className={styles.onHoldInSin} style={{margin: '0 28px'}}>
                        <span className={styles.onHoldInSpan}>转运单号：</span>
                        <Input className={styles.onHoldInInput}/>
                    </div>
                    <div className={styles.onHoldInSin} style={{marginRight: '28px'}}>
                        <span className={styles.onHoldInSpan}>转运单号：</span>
                        <Select className={styles.onHoldInInput}>
                            <Option value="value">Luky</Option>
                        </Select>
                    </div>
                    <div className={styles.onHoldInSin} style={{marginRight: '28px'}}>
                        <span className={styles.onHoldInSpan}>运单类型：</span>
                        <Select className={styles.onHoldInInput}>
                            <Option value="value">Luky</Option>
                        </Select>
                    </div>
                </div>
                <div className={styles.onHoldInButton}>
                    <Button type="primary" icon="search">查询</Button>
                </div>
                <div className={styles.onHoldInTable}>
                   <SingleTable
                        data={{ list: dataList }}
                        columns={columns}
                    />
                </div>
            </div>
        )
    }
}